<template>
	<div>
		<div class="container">
			<div v-for="(item, index) in res" :key="index">
				<input
					type="checkbox"
					:id="item.label"
					v-model="item.checked"
				/>
				<label :for="item.label">
					{{ item.label }}
				</label>
			</div>
		</div>
		<ul>
			<li
				v-for="(item, index) in res.filter((d) => d.checked)"
				:key="index"
			>
				{{ item.label }}
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			res: ["科幻", "喜剧", "戏剧", "动漫", "冒险", "科技", "娱乐"].map(
				(item) => ({ label: item, checked: false })
			)
		};
	},
};
</script>
<style scoped>
.container {
	display: flex;
}
</style>